<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="detailRegister"
    @close="drawerReset"
    width="1026"
    :showOkBtn="false"
    cancelText="关闭"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer">
      <div class="drawer-table">
        <BasicTable @register="registerTable">
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'sessionDeleted'">
              <span v-if="record.sessionDeleted == '0'">否</span>
              <span v-else-if="record.sessionDeleted == '1'">是</span>
              <span v-else>--</span>
            </template>
            <template v-else-if="column.dataIndex === 'acontent'">
              <EllipsisTooltip :title="contextMsgFormat(record.acontent)" :width="140" :useHtml="true">
                {{ record.acontent || '--' }}
              </EllipsisTooltip>
            </template>
            <template v-else-if="column.dataIndex === 'operate'">
              <a-button type="link" class="g-operate-btn" @click="openView(record)"> 详情 </a-button>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { BasicTable, useTable } from '@/components/Table'
import { ReloadOutlined, CopyOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import { message } from 'ant-design-vue'
import api from '@/api'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import { md } from '@/utils/markdown'

const { chatDetail } = api

const emit = defineEmits(['register', 'viewData'])

const drawerState = reactive<{ record: any }>({
  record: {}
})

const [registerTable, { reload, setPagination, setTableData, setProps, getForm }] = useTable({
  api: chatDetail,
  columns: [
    {
      title: '会话ID',
      width: 130,
      customEllipsis: true,
      dataIndex: 'sessionId'
    },
    {
      title: '会话名称',
      width: 130,
      customEllipsis: true,
      dataIndex: 'sessionTitle'
    },
    {
      title: '问题',
      width: 130,
      customEllipsis: true,
      dataIndex: 'qcontent'
    },
    {
      title: '回答',
      width: 140,
      dataIndex: 'acontent'
    },
    {
      title: '咨询时间',
      width: 140,
      dataIndex: 'createTime'
    },
    {
      title: '是否删除',
      width: 70,
      dataIndex: 'sessionDeleted'
    },
    {
      title: '操作',
      width: 50,
      dataIndex: 'operate'
    }
  ],
  immediate: false, //初始化不请求数据
  pagination: { hideOnSinglePage: true }, // 只有一页时隐藏分页器
  useSearchForm: true,
  showIndexColumn: true,
  formConfig: {
    labelWidth: 70,
    baseColProps: {
      span: 12
    },
    schemas: [
      {
        field: 'qcontent',
        label: '问题',
        component: 'Input'
      },
      {
        field: 'acontent',
        label: '回答',
        component: 'Input'
      }
    ]
  }
})

const [detailRegister, { closeDrawer, changeLoading }] = useDrawerInner((data) => {
  let record = cloneDeep(data.record)
  let type = data.type
  drawerState.record = record || {}
  setTableData([])
  setPagination({
    current: 1,
    pageSize: 10,
    total: 0
  })
  let mapData: any = {
    chatCount: '',
    likeCount: 'good',
    badCount: 'bad'
  }
  let queryData: any = {
    userId: record.userId,
    likeStatus: mapData[type]
  }
  setProps({
    searchInfo: queryData
  })
  reload()
})
// 对话markdown格式化
const contextMsgFormat = (acontent: string) => {
  let contextMsg = acontent
  if (contextMsg) {
    contextMsg = contextMsg.replace(/\\n/g, '\r\n') // 转化标题
    contextMsg = md.render(contextMsg as string)
  }
  return contextMsg || '--'
}
const drawerReset = () => {
  drawerState.record = {}
  const formData = getForm()
  formData.setFieldsValue({
    qcontent: '',
    acontent: ''
  })
}
// 查看详情
const openView = (record: any) => {
  console.info(record)
  emit('viewData', record)
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 8px;
  :deep(.drawer-table) {
    .basic-table-form-container .ant-form {
      background: transparent;
      box-shadow: none;
      padding-top: 0;
    }
  }
}
</style>
